<template>
	<div id="app">
		<el-container class="container">
			<el-aside width="300px" style="height: 100%; background-color: rgb(84, 92, 100)">
				<el-menu
					:default-active="defaultActive"
					class="el-menu-vertical-demo"
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b"
				>
					<el-menu-item index="/" @click="toView('/')">
						<i class="el-icon-location"></i>
						<span>首页</span>
					</el-menu-item>
					<el-menu-item index="/handle-img" @click="toView('/handle-img')">
						<i class="el-icon-menu"></i>
						<span>图片处理</span>
					</el-menu-item>
					<el-menu-item index="/tiny-mce" @click="toView('/tiny-mce')">
						<i class="el-icon-menu"></i>
						<span>tinymce富文本</span>
					</el-menu-item>
					<el-menu-item index="/clipboard" @click="toView('/clipboard')">
						<i class="el-icon-menu"></i>
						<span>clipboard复制</span>
					</el-menu-item>
					<el-menu-item index="/swiper" @click="toView('/swiper')">
						<i class="el-icon-menu"></i>
						<span>swiper轮播</span>
					</el-menu-item>
					<el-menu-item index="/check" @click="toView('/check')">
						<i class="el-icon-menu"></i>
						<span>check选择</span>
					</el-menu-item>
					<el-menu-item index="/i18n" @click="toView('/i18n')">
						<i class="el-icon-menu"></i>
						<span>i18n国际化</span>
					</el-menu-item>
					<el-menu-item index="/papaparse" @click="toView('/papaparse')">
						<i class="el-icon-menu"></i>
						<span>Papa Parse-csv导入导出</span>
					</el-menu-item>
					<el-menu-item index="/validator" @click="toView('/validator')">
						<i class="el-icon-menu"></i>
						<span>validator表单验证</span>
					</el-menu-item>
					<el-menu-item index="/tableuse" @click="toView('/tableuse')">
						<i class="el-icon-menu"></i>
						<span>table使用</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-container>
				<el-main>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
export default {
	data() {
		return {
			defaultActive: '',
		};
	},
	watch: {
		'$route.matched': {
			handler(val) {
				if (val.length > 0) {
					this.defaultActive = val[0].path ? val[0].path : '/';
				}
			},
			immediate: true,
		},
	},
	methods: {
		toView(url) {
			if (this.$route.fullPath != url) {
				this.defaultActive = url;
				this.$router.push({ path: url });
			}
		},
	},
};
</script>

<style scoped lang="scss">
#app {
	position: absolute;
	width: 100%;
	height: 100%;

	.container {
		width: 100%;
		height: 100%;
	}
}
</style>
